<template>
  <div>
    <div class="dg">
      <div @click="shengp" >商品</div>
      <div @click="shengp2">医院</div>
      <div @click="shengp3">医生</div>
      <div @click="shengp4">达人</div>
    </div>
    <keep-alive class="a1">
      <component :is=aa></component>
    </keep-alive>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "@vue/reactivity"
import commodity from "./commodity.vue"
import doctor from "./doctor.vue"
import hospital from "./hospital.vue"
import Master from "./Master.vue"
let aa=ref(commodity)
let shengp=function(){
      aa.value=commodity
}
let shengp2=function(){
      aa.value=hospital
}
let shengp3=function(){
      aa.value=doctor
}
let shengp4=function(){
      aa.value=Master
}
</script>

<style scoped>
.dg{display: flex;background-color: #ffffff;}
.dg div{width: 25%;text-align: center;font-size: 18px;}
.a1{background-color: #f5f2ef;}
</style>